<!-- 列表选择 -->
<template>
    <div class="selection">
        <ul class="se_list">
            <li v-for="item, index in listImg" :key="item.id" :class="{ smil: item.id > 5 }" @click="jumpClass(index)">
                <img :src="item.img" alt="">
                <p>{{ item.text }}</p>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "selection",
    props: {
        listImg: Array
    },
    methods: {
        jumpClass(index) {
            if (index < 5) {
                this.$router.push(`/Classification?index=${index + 1}`)
            }
        }
    }
}
</script>
<style scoped lang="less">
.selection {
    padding: .2rem 0;
    background: #fff;
    margin: 0 .24rem;
    border-radius: .1rem;
}

.se_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
        width: 20%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-size: .24rem;
        font-weight: bolder;

        img {
            width: .8rem;
            height: .78rem;
            margin: 0 .5rem;
        }

        ;

        p {

            text-align: center;
            margin-top: .08rem;
        }


    }

    .smil {
        margin-top: .4rem;
        font-weight: normal;

        img {
            width: .36rem;
            height: .34rem;
        }

        p {
            margin-top: .12rem;
        }

    }

}
</style>